<template>
	<div>
		<div class="globel-style">NuxtWelcome</div>
		<div class="global-styles1">第二种 全局样式</div>
		<div class="global-style2">第三种 使用sass编写的全局样式</div>

		<!-- public 资源的访问: /: 就表示的public文件夹 -->
		<img src="/user-pic.png" alt="" />
		<div class="bg-public"></div>

		<!-- 访问assets中的资源 @,~:表示根目录-->
		<img src="@/assets/images/avatar.png" alt="" />
		<div class="assets-bg"></div>
		<img :src="ImgFeel" alt="" />

		<!-- 字体图标引入 -->
		<i class="icon-bianji iconfont"></i>
		<NuxtPage></NuxtPage>
	</div>
</template>

<script setup>
	import ImgFeel from '@/assets/images/avatar.png'
</script>

<style lang="scss">
	/* 第一种方式: 在App中是用, 并且style 不使用 scoped, 让样式直接穿透组件 */
	.globel-style {
		/* color: red; */
		color: $color;
	}

	.bg-public {
		width: 200px;
		height: 200px;
		border: 1px solid red;
		background: url('/user-pic.png');
	}

	.assets-bg {
		width: 200px;
		height: 200px;
		border: 1px solid red;
		background-image: url('~/assets/images/avatar.png');
	}
</style>
